<template>
  <div class="status-tag" :class="rootClass">
    <!-- 状态标签列表：支持点击事件与自定义样式 -->
    <span
      v-for="t in normalizedTags"
      :key="String(t)"
      :class="['status-tag__item', mapClass(String(t))]"
      :style="mapStyle(String(t))"
      @click="onTagClick(t)"
      >{{ t }}</span
    >
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 组件属性定义（仅使用JavaScript语法，遵循Vue3 Composition API）
const props = defineProps({
  // 状态标签数组，如 [1,2,3] 或 ['执','核']
  statusTags: {
    type: Array,
    default: () => []
  },
  // 根节点附加类名，便于页面按需定制样式（BEM扩展）
  rootClass: {
    type: [String, Array, Object],
    default: ''
  },
  // 可选：覆盖默认的标签-类名映射，例如 { 'Ⅰ': 'warning' }
  tagClassMap: {
    type: Object,
    default: () => ({})
  },
  // 可选：覆盖默认的标签-内联样式映射，例如 { '危': { background: 'red' } }
  tagStyleMap: {
    type: Object,
    default: () => ({})
  }
})

// 事件定义：对外抛出点击事件，便于页面绑定业务逻辑
const emit = defineEmits(['tag-click'])

// 统一将标签转为字符串，避免数字/字符串混用导致的比较问题
const normalizedTags = computed(() => props.statusTags.map(v => String(v)))

// 默认的标签到样式类名映射逻辑（与现有页面保持一致）
const defaultClassMap = {
  '3': 'success',
  '1': 'info',
  'Ⅰ': 'warning',
  '4': 'error',
  '5': 'warning',
  '执': 'info',
  '核': 'success'
}

// 根据标签值返回对应的类名，允许被外部覆盖
const mapClass = tag => {
  const override = props.tagClassMap && props.tagClassMap[tag]
  if (override) return override
  return defaultClassMap[tag] || ''
}

// 根据标签值返回对应的内联样式，允许被外部覆盖
const mapStyle = tag => {
  const override = props.tagStyleMap && props.tagStyleMap[tag]
  return override || null
}

// 标签点击事件：向父组件派发当前标签值
const onTagClick = tag => {
  emit('tag-click', tag)
}
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables.module.scss' as *;

.status-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.status-tag__item {
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border: 1px solid $border-color;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  background: #fafafa;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.status-tag__item.error {
  background: $red;
  color: #fff;
}

.status-tag__item.warning {
  background: $yellow;
  color: #fff;
}

.status-tag__item.success {
  background: $green;
  color: #fff;
}

.status-tag__item.info {
  background: $blue;
  color: #fff;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .status-tag__item {
    font-size: 11px;
    padding: 2px 5px;
  }
}
</style>
